<style lang="less">
@import "./CategoryMooc.less";
</style>

<template>
  <div>
    <div class="products-banner-wrap">
      <div class="banner-content-wrap">
        <div class="content-nav">
          <a class="header-icon">
            <div class="bag-wrap">
              <Icon class="bag-icon" type="logo-youtube"></Icon>
            </div>
            <span>实战课程</span>
          </a>
          <div class="header-search">
            <Input v-model="key" size="large" placeholder="搜索感兴趣的商品内容">
            <Button slot="append" icon="ios-search"></Button>
            </Input>
            <ul class="header-search-result"></ul>
  
            <div class="search-hot">
              <span>热搜：</span>
              <a v-for="(item, i) in hotWords" :key="i" href="#">{{item}}</a>
            </div>
          </div>
        </div>
      </div>
      <!-- 背景动画 -->
      <div class="darker"></div>
      <div class="products-banner">
        <div class="banner-absolute">
          <div class="banner-bk">
            <div class="svg-block image1"></div>
            <div class="svg-diamond image2"></div>
            <div class="svg-leaf image3"></div>
            <div class="svg-small-circle"></div>
            <div class="svg-big-circle"></div>
            <div class="svg-triangle image4"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="products-content-wrap">
      <div class="products-header-nav">
        <div class="nav-wrap">
          <a v-for="(item,i) in catData" :key="i" :class="{'active':i==currFirstCat}" @click="handleFirstCat(item,i)">{{item.title}}</a>
        </div>
      </div>
      <div class="products-cat">
        <a v-for="(item,i) in secondCat" :key="i" :class="{'active':i==currSecondCat}" @click="handleSecondCat(item,i)">{{item.title}}</a>
      </div>
      <div class="order-box">
        <div class="order-type">
          <a v-for="(item,i) in orderData" :key="i" :class="{'active':i==currOrderType}" @click="handleOrderType(item,i)">{{item.title}}</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CategoryMooc",
  data() {
    return {
      // 模拟数据
      key: "",
      hotWords: [
        "React.js",
        "算法",
        "Vue.js",
        "Python",
        "人工智能",
        "GO语言",
        "小程序"
      ],
      currFirstCat: 0,
      currSecondCat: 0,
      currOrderType: 0,
      orderData: [
        {
          title: "综合排序",
          order: "",
          sort:""
        },
        {
          title: "最新",
          order: "",
          sort:""
        },
        {
          title: "销量",
          order: "",
          sort:""
        },
        {
          title: "评价",
          order: "",
          sort:""
        }
      ],
      secondCat: [
        {
          title: "不限"
        },
        {
          title: "微服务"
        },
        {
          title: "区块链"
        },
        {
          title: "机器学习"
        },
        {
          title: "深度学习"
        },
        {
          title: "数据分析&挖掘"
        },
        {
          title: "小程序"
        },
        {
          title: "HTML/CSS"
        },
        {
          title: "JavaScript"
        },
        {
          title: "Vue.js"
        },
        {
          title: "React.JS"
        },
        {
          title: "Java"
        },
        {
          title: "SpringBoot"
        },
        {
          title: "SSM"
        },
        {
          title: "Python"
        },
        {
          title: "爬虫"
        }
      ],
      catData: [
        {
          title: "全部",
          type: "all"
        },
        {
          title: "前沿技术",
          children: [
            {
              title: "微服务"
            },
            {
              title: "区块链"
            },
            {
              title: "机器学习"
            },
            {
              title: "深度学习"
            },
            {
              title: "数据分析&挖掘"
            }
          ]
        },
        {
          title: "前端开发",
          children: [
            {
              title: "小程序"
            },
            {
              title: "HTML/CSS"
            },
            {
              title: "JavaScript"
            },
            {
              title: "Vue.js"
            },
            {
              title: "React.JS"
            }
          ]
        },
        {
          title: "后端开发",
          children: [
            {
              title: "Java"
            },
            {
              title: "SpringBoot"
            },
            {
              title: "SSM"
            },
            {
              title: "Python"
            },
            {
              title: "爬虫"
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleFirstCat(v, i) {
      this.currFirstCat = i;
      if (v.type == "all") {
        return;
      }
      let data = [
        {
          title: "不限",
          type: "all"
        }
      ];
      v.children.forEach(e => {
        data.push(e);
      });
      this.secondCat = data;
    },
    handleSecondCat(v, i) {
      this.currSecondCat = i;
      if (v.type == "all") {
      }
    },
    handleOrderType(v, i) {
      this.currOrderType = i;
    },
  },
  mounted() {}
};
</script>
